<template>
  <div class="app-container">
    <!-- 搜索栏开始 -->
    <el-card class="box-card">
      <el-form ref="page" :inline="true" :model="page" size="small" label-width="90px">
        <el-form-item label="菜单名称">
          <el-input v-model="page.menuName" style="width: 240px" clearable placeholder="请输入菜单名称" />
        </el-form-item>
        <el-form-item label="显示状态">
          <el-select v-model="page.status" clearable placeholder="请选择显示状态">
            <el-option label="正常" :value="1" />
            <el-option label="停用" :value="0" />
          </el-select>
        </el-form-item>
        <el-form-item style="display: block;text-align: center;margin-top: 5px;">
          <el-button type="primary" icon="el-icon-search" @click="page.pageNum = 1;getTreeList()">查询</el-button>
          <el-button type="warning" icon="el-icon-refresh" @click="reset()">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 搜索栏结束 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          v-hasPer="['sys:menu:add']"
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="add"
        >新增
        </el-button>
      </el-col>
    </el-row>
    <!-- 数据表格开始 -->
    <el-table
      v-loading="loading"
      :data="dataPage"
      row-key="menuId"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="160" />
      <el-table-column prop="icon" label="图标" align="center" width="100">
        <template slot-scope="scope">
          <svg-icon v-if="scope.row.icon && scope.row.icon.indexOf('el-icon') === -1" :icon-class="scope.row.icon" />
          <i v-if="scope.row.icon && scope.row.icon.indexOf('el-icon') !== -1" :class="scope.row.icon" />
        </template>
      </el-table-column>
      <el-table-column prop="orderNum" label="排序" width="60px" />
      <el-table-column prop="permission" label="权限标识" :show-overflow-tooltip="true" />
      <el-table-column prop="componentUrl" label="组件路径" :show-overflow-tooltip="true" />
      <el-table-column prop="menuName" label="菜单名称">
        <template slot-scope="{row}">
          <el-tag v-if="row.menuType === 1">目录</el-tag>
          <el-tag v-if="row.menuType === 2" type="success">菜单</el-tag>
          <el-tag v-if="row.menuType === 3" type="danger">按钮</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="visible" label="显示状态">
        <template slot-scope="{row}">
          <el-tag v-if="row.visible === 1">正常</el-tag>
          <el-tag v-if="row.visible === 0" type="danger">停用</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="启用状态" width="80px">
        <template slot-scope="{row}">
          <el-tag v-if="row.status === 1">启用</el-tag>
          <el-tag v-if="row.status === 0" type="danger">禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="80px">
        <template slot-scope="{row}">
          <el-dropdown class="handle-button">
            <span class="el-dropdown-link">
              操作<i class="el-icon-arrow-down el-icon--right" />
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-hasPer="['sys:menu:update']" @click.native="update(row.menuId)">
                <el-button type="text" icon="el-icon-edit">修改</el-button>
              </el-dropdown-item>
              <el-dropdown-item v-hasPer="['sys:menu:delete']" @click.native="deleteById(row.menuId)">
                <el-button type="text" icon="el-icon-delete">删除</el-button>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <!--  数据表格结束 -->
    <!-- 分页组件开始 -->
    <div class="pageable">
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="page.pageNum"
        :limit.sync="page.pageSize"
        @pagination="getTreeList"
      />
    </div>
    <!-- 分页组件结束 -->

    <!-- 添加弹窗 -->
    <el-dialog title="添加菜单" width="30%" :visible.sync="addDialog">
      <sys-menu-add v-if="addDialog" @after="getTreeList" @close="closeDialog" />
    </el-dialog>
    <!-- 添加弹窗结束 -->

    <!-- 修改弹窗 -->
    <el-dialog title="修改菜单" width="30%" :visible.sync="updateDialog">
      <sys-menu-update v-if="updateDialog" :active-id="activeId" @close="closeDialog" @after="getTreeList" />
    </el-dialog>
    <!-- 修改弹窗结束 -->
  </div>
</template>

<script>

import api from '@/api/system/sys-menu'
import SysMenuAdd from '@/views/system/sysMenu/sys-menu-add'
import SysMenuUpdate from '@/views/system/sysMenu/sys-menu-update'

export default {
  name: 'SysMenuList',
  components: { SysMenuUpdate, SysMenuAdd },
  data() {
    return {
      // 加载层
      loading: false,
      // 分页搜索条件
      page: {
        menuName: undefined
      },
      // 记录id
      activeId: 0,
      // 集合数据
      dataPage: [],
      // 总页数
      total: 0,
      // 添加弹出
      addDialog: false,
      // 修改弹出
      updateDialog: false
    }
  },
  created() {
    this.getTreeList()
  },
  methods: {
    /**
     * 获取菜单列表
     */
    getTreeList() {
      this.loading = true
      api.getTreeList(this.page).then(res => {
        // 前端构造菜单列表
        // this.dataPage = this.handleTree(res.rows, 'menuId')
        this.dataPage = res.data
        this.loading = false
      })
    },
    /**
     * 添加组件
     */
    add() {
      this.addDialog = true
    },
    /**
     * 更新组件传递参数
     * @param id
     */
    update(id) {
      this.activeId = id
      this.updateDialog = true
    },
    /**
     * 删除菜单
     * @param id
     */
    deleteById(id) {
      // 记录选中的ID/删除
      this.$confirm('是否删除该菜单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        api.delete(id).then(res => {
          this.$message.success(res.msg)
          this.getTreeList()
        })
      })
    },
    // 关闭弹窗
    closeDialog() {
      this.addDialog = false
      this.updateDialog = false
    },
    // 重置
    reset() {
      this.resetForm('page')
      this.page = {
        menuName: undefined
      }
      this.getTreeList()
    }
  }
}
</script>

<style scoped>

</style>
